<%--<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%@ include file="/layout/tag.jsp"%>
<script type="text/javascript">
	$(document).ready( 
		function() {
			//事件注册.
			$("#returnBtn").click(returnToList);
			$("#addHisBtn").click(addHisRow);
			$("select[name='srvSysId']").each(
				function(index) {
					$(this).change(findService);
				}
			);
			$("a[name='saveHisBtn']").each(
				function(index) {
					$(this).click(saveHis);
				}
			);
			
			$("a[name='delHisBtn']").each(
				function(index) {
					$(this).click(deleteHis);
				}
			);
			
			$("#addDepositBtn").click(addDepositRow);
			$("a[name='saveDepositBtn']").each(
				function(index) {
					$(this).click(saveDeposit);
				}
			);
			
			$("a[name='delDepositBtn']").each(
				function(index) {
					$(this).click(delDeposit);
				}
			);
			
			
			//设置左菜单对应菜单CSS为选中状态.
			changeToActiveCss("menu_6010");
			
			//显示押金合计
			sumDeposit();
			
			//消息显示.
			var msg = '<c:out value="${msg}"/>';
			if (msg != "") {
				alert(msg);
			}
		}
	);
	
	function addHisRow() {					
		var strTr = $("<tr sysid=''><td><div class='buttons' style='float:left; margin-left:5px;'><input type='hidden' name='mbSysId' value='${member.sysId}'/> " +
					"			<a  name='saveHisBtn' href='#' title='结束日期大于等于系统日期,允许保存.'>保存</a> " +
					"			<a name='delHisBtn' href='#' title='开始日期大于等于系统日期,允许删除.'>删除</a></div></td> " +
					"	<td><select name='srvSysId' style='width:70px; '> " +
					"		<option value=''></option> " +
					<c:forEach var="serviceItem" items="${serviceList}" varStatus="status">
					"		<option value='${serviceItem.sysId}'>${serviceItem.name}</option> " +
					</c:forEach>
					"		</select><input type='hidden' name='name' value=''/></td> "+
					"	<td><input type='text' name='startDate' maxlength='10' style='width:60px; ' value=''/></td> " +
					"	<td style='text-align:center;'><input type='text' name='endDate' maxlength='10' style='width:60px;' value=''/></td> " +
					"	<td style='text-align:right;'><span name='fee'></span><input type='hidden' name='fee' value=''/></td> " +
					"	<td style='text-align:right;'><span name='count'></span><input type='hidden' name='count' value=''/></td> " +
					"	<td style='text-align:right;'><span name='max'></span></span><input type='hidden' name='max' value=''/></td> " +
					"	<td style='text-align:right;'><span name='deposit'></span><input type='hidden' name='deposit' value=''/></td> " +
					"	<td style='text-align:right;'><input type='text' name='remain' value='' style='width:30px; text-align:right;'/></td> " +
					"	<td style='text-align:left;'><input type='text' name='log' value='' style='width:90px;'/></td></tr>");
						
		var tr = $("#hisTable").append(strTr);
		$("select[name='srvSysId']:last").change(findService);
		$("a[name='delHisBtn']:last").click(deleteHis);
		$("a[name='saveHisBtn']:last").click(saveHis);
	}
	
	function saveHis() {
		var allObjs = $(this).parents("tr").find("*");
		var strData = "sysId=" + $(this).parents("tr").attr("sysid");
		
		//必须选择了服务类型
		var srvObj =  $(this).parents("tr").find("select[name='srvSysId']");
		var srvId = srvObj.val().Trim();
		if (srvId == "") {
			alert("必须指定租赁服务类型.");
			srvObj.focus();
			return false;
		}
		
		//开始日期如果没有入力,那么不能保存
		var startDateObj = $(this).parents("tr").find("input[name='startDate']");
		var startDate = startDateObj.val().Trim();
		if(startDate == "") {
			alert("开始日期不能为空白.");
			startDateObj.focus();
			return false;
		}
		
		//结束日期如果没有入力,那么不能保存
		var endDateObj = $(this).parents("tr").find("input[name='endDate']");
		var endDate = endDateObj.val().Trim();
		if(endDate == "") {
			alert("结束日期不能为空白.");
			endDateObj.focus();
			return false;
		}
		//剩余次数如果没有入力, 那么不能保存
		var remainObj = $(this).parents("tr").find("input[name='remain']");
		var remain = remainObj.val().Trim();
		if(remain == "") {
			alert("剩余次数不能为空白.");
			remainObj.focus();
			return false;
		}
		//剩余次数如果是非数值型,那么不能保存
		if(isNaN(remain)) {
			alert("剩余次数只能为数值型.");
			remainObj.focus();
			return false;
		}
		
		//剩余次数如果小于0,那么不能保存
		if(parseInt(remain) < 0) {
			alert("剩余次数只能为大于0的整数.");
			remainObj.focus();
			return false;
		}
		
		allObjs.each(function(){
			var tagName = this.tagName;
			if (tagName == "INPUT" || tagName == "SELECT") {
				strData += "&" + $(this).attr("name") + "=" + $(this).attr("value").Trim();
			}
		});
		
		$.ajax({
			type:"post",
			url:"${pageContext.request.contextPath}/member/saveHis.do",
			context:this,
			dataType:"json",
			data:strData,
			success:saveHisCallBack,
			error:function(){alert("发生了错误.");},
		});
	}
	
	function saveHisCallBack(result) {
		if (result.status == "OK") {
			$(this).parents("tr").attr("sysid", result.sysId);
			alert(result.msg);
		} else {
			alert(result.msg);
		}
	}
	
	function deleteHis() {
		var sysId = $(this).parents("tr").attr("sysid");
		if (sysId != undefined && $.trim(sysId) != "") {
			if(!confirm("确定要删除续费履历信息吗?")) {
				return false;
			}
		
			$.ajax({
				type:"post",
				url:"${pageContext.request.contextPath}/member/deleteHis.do",
				context:this,
				dataType:"json",
				data:"sysId=" + sysId,
				success:deleteHisCallBack,
				error:function(){alert("发生了错误.");},
			});
		} else {
			$(this).parents("tr").remove();
		}
	}
	
	function deleteHisCallBack(result) {
		if (result.status == "OK") {
			$(this).parents("tr").remove();
			alert(result.msg);
		} else {
			alert(result.msg);
		}
	}
	
	function findService() {
		var sysId = $(this).val();
		if (sysId != undefined && $.trim(sysId) != "") {
			$.ajax({
				type:"post",
				url:"${pageContext.request.contextPath}/member/findService.do",
				context:this,
				dataType:"json",
				data:"sysId=" + sysId,
				success:findServiceCallBack,
				error:function(){alert("发生了错误.");},
			});
		} else {
			$(this).parents("tr").find("input[name='name']").val("");
		
			$(this).parents("tr").find("span[name='fee']").html("");
			$(this).parents("tr").find("input[name='fee']").val("");
			
			$(this).parents("tr").find("span[name='count']").html("");
			$(this).parents("tr").find("input[name='count']").val("");
			
			$(this).parents("tr").find("span[name='max']").html("");
			$(this).parents("tr").find("input[name='max']").val("");
			
			$(this).parents("tr").find("span[name='deposit']").html("");
			$(this).parents("tr").find("input[name='deposit']").val("");
		}
	}
	
	function findServiceCallBack(result) {
		if (result.status == "OK") {
			$(this).parents("tr").find("input[name='name']").val(result.service.name);
		
			$(this).parents("tr").find("span[name='fee']").html(result.service.fee);
			$(this).parents("tr").find("input[name='fee']").val(result.service.fee);
			
			$(this).parents("tr").find("span[name='count']").html(result.service.count);
			$(this).parents("tr").find("input[name='count']").val(result.service.count);
			
			$(this).parents("tr").find("span[name='max']").html(result.service.max);
			$(this).parents("tr").find("input[name='max']").val(result.service.max);
			
			$(this).parents("tr").find("span[name='deposit']").html(result.service.deposit);
			$(this).parents("tr").find("input[name='deposit']").val(result.service.deposit);
		} else {
			alert(result.msg);
		}
	}
	
	function addDepositRow() {
		var strTr = $("<tr sysid=''><td><div class='buttons' style='float:left; margin-left:5px;'> " +
					"			<a name='saveDepositBtn' href='#'>保存</a><a name='delDepositBtn' href='#'>删除</a></div></td> " +
					"	<td><span name='createTime'></span><input type='hidden' name='mbSysId' value='${member.sysId}'/></td> " +
					"	<td><input type='text' name='deposit' style='width:30px;' maxlength='8' value=''/></td> " +
					"	<td style='text-align:left;'><input type='text' name='log' maxlength='12' style='width:70px;' value=''/></td></tr>");
						
		$("#depositTable").append(strTr);
		$("a[name='saveDepositBtn']:last").click(saveDeposit);
		$("a[name='delDepositBtn']:last").click(delDeposit);
	}
	
	function saveDeposit() {
		var allObjs = $(this).parents("tr").find("*");
		var strData = "sysId=" + $(this).parents("tr").attr("sysid");
		
		//押金如果没有入力,那么不能保存
		var depositObj = $(this).parents("tr").find("input[name='deposit']");
		var deposit = depositObj.val().Trim();
		if(deposit == "") {
			alert("押金不能为空白.");
			depositObj.focus();
			return false;
		}
		//押金如果是非数值型,那么不能保存
		if(isNaN(deposit)) {
			alert("押金只能为数值型.");
			depositObj.focus();
			return false;
		}
		
		allObjs.each(function(){
			var tagName = this.tagName;
			if (tagName == "INPUT" || tagName == "SELECT") {
				strData += "&" + $(this).attr("name") + "=" + $(this).attr("value").Trim();
			}
		});
		
		$.ajax({
			type:"post",
			url:"${pageContext.request.contextPath}/member/saveDeposit.do",
			context:this,
			dataType:"json",
			data:strData,
			success:saveDepositCallBack,
			error:function(){alert("发生了错误.");},
		});
	}
	
	function saveDepositCallBack(result) {
		if (result.status == "OK") {
			$(this).parents("tr").attr("sysid", result.sysId);
			$(this).parents("tr").find("span[name='createTime']").html(result.createTime);
			sumDeposit();
			alert(result.msg);
		} else {
			alert(result.msg);
		}
	}
	
	function delDeposit() {	
		var sysId = $(this).parents("tr").attr("sysid");
		if (sysId != undefined && $.trim(sysId) != "") {
			if(!confirm("确定要删除押金履历信息吗?")) {
				return false;
			}
		
			$.ajax({
				type:"post",
				url:"${pageContext.request.contextPath}/member/deleteDeposit.do",
				context:this,
				dataType:"json",
				data:"sysId=" + sysId,
				success:delDepositCallBack,
				error:function(){alert("发生了错误.");},
			});
		} else {
			$(this).parents("tr").remove();
		}
	}
	
	function delDepositCallBack(result) {
		if (result.status == "OK") {
			$(this).parents("tr").remove();
			sumDeposit();
			alert(result.msg);
		} else {
			alert(result.msg);
		}
	}
	
	function sumDeposit() {
		var sum = 0;
		$("input[name='deposit']").each(function(){
			var deposit = parseInt($(this).val());
			if(!isNaN(deposit)) {
				sum += deposit;
			}
		});
		$("#sum").html(sum);
	}

	function returnToList() {
		window.location.href='${pageContext.request.contextPath}/member/enterMemberList.do';
	}
	
</script>
<div id="content_right">
	<div style="width:100%;height:35px;line-height:35px;text-align:left;background-color:#F5FAFA;font-weight:bold; ">会员 > 会员管理 > 会员列表 > 缴续费</div>
	<div>
		<div id="tabBar">
			<span class="curentTab">缴续费总览</span>
		</div>
		<div class="buttons" style="float:right; ">
			<a id="returnBtn" href="#">
				<img src="../images/btn_apply.png" alt=""/> 
				返回列表
			</a>
		</div>
	</div>
	<div id="editContainer">
		<div id="baseInfo" class="editPanel">
			<span class="title">会员信息</span>
			<div style="clear:both;"></div>
			<div style="float:left; width:100%;margin-left:10px;">
				<table>
					<tr>
						<th>用户ID：</th>
						<td>
							${member.userId}
						</td>
					</tr>
					<tr>
						<th>会员名：</th>
						<td>${member.name}</td>
					</tr>
					<tr>
						<th>手机：</th>
						<td>${member.mobile}</td>
					</tr>
					<tr>
						<th>电话：</th>
						<td>${member.phone}</td>
					</tr>
					<tr>
						<th>地址：</th>
						<td>${member.address}</td>
					</tr>
				</table>
			</div>
			<div style="clear:both;"></div>
		</div>
		
		<div id="relationInfo" class="editPanel" style="float:left;height:320px; width:65%;">
			<span class="title">缴续费</span>
			<div style="clear:both;"></div>
			<div style="float:left; width:96%;margin-left:10px;height:92%;overflow-y:scroll;overflow-x:hidden;border:1px solid white;">
				<table id="hisTable" class="relationTable">
					<tr>
						<th style="width:18%;">
							<div class="buttons" style="float:left; margin-left:5px;">
								<a id="addHisBtn" href="#">
									添加
								</a>
							</div>
						</th>
						<th style="width:11%;">
							服务类型
						</th>
						<th style="width:10%;">
							开始日期
						</th>
						<th style="width:10%;">
							结束日期
						</th>
						<th style="width:8%;">
							会费
						</th>
						<th style="width:6%;">
							次数
						</th>
						<th style="width:6%;">
							本次
						</th>
						<th style="width:8%;">
							服务</br>押金
						</th>
						<th style="width:6%;">
							剩余</br>次数
						</th>
						<th style="width:15%;">
							备注
						</th>
					</tr>
					<c:forEach var="item" items="${hisList}" varStatus="status">
					<tr sysid='${item.sysId}'>
						<td>
							<input type="hidden" name="mbSysId" value="${member.sysId}"/>
							<div class="buttons" style="float:left; margin-left:5px;">
								<a name="saveHisBtn" href="#" title="结束日期大于等于系统日期,允许保存.">
									保存
								</a>
								<a name="delHisBtn" href="#" title="开始日期大于等于系统日期,允许删除.">
									删除
								</a>
							</div>
						</td>
						<td>
							<select name="srvSysId" style="width:70px; ">
								<option value=''></option>
							<c:forEach var="serviceItem" items="${serviceList}" varStatus="status">
							  <c:choose>
								<c:when test="${item.srvSysId == serviceItem.sysId}">
								<option value="${serviceItem.sysId}" selected>${serviceItem.name}</option>
								</c:when>
								<c:otherwise>
								<option value="${serviceItem.sysId}">${serviceItem.name}</option>
								</c:otherwise>
							  </c:choose>
							</c:forEach>
							</select>
							<input type="hidden" name="name" value="${item.name}"/>
						</td>
						<td>
							<input type="text" name="startDate" maxlength='10' style="width:60px; " value="${item.startDate}"/>
						</td>
						<td style="text-align:center;">
							<input type="text" name="endDate" maxlength='10' style="width:60px; " value="${item.endDate}"/>
						</td>
						<td style="text-align:right;">
							<span name="fee">${item.fee}</span>
							<input type="hidden" name="fee" value="${item.fee}"/>
						</td>
						<td style="text-align:right;">
							<span name="count">${item.count}</span>
							<input type="hidden" name="count" value="${item.count}"/>
						</td>
						<td style="text-align:right;">
							<span name="max">${item.max}</span>
							<input type="hidden" name="max" value="${item.max}"/>
						</td>
						<td style="text-align:right;">
							<span name="deposit">${item.deposit}</span>
							<input type="hidden" name="deposit" value="${item.deposit}"/>
						</td>
						<td style="text-align:right;">
							<input type="text" name="remain" value="${item.remain}" style="width:30px; text-align:right;"/>
						</td>
						<td style="text-align:left;">
							<input type="text" name="log" value="${item.log}" style="width:90px;"/>
						</td>
					</tr>
					</c:forEach>
				</table>
				<div style="height:1px;clear:both;"></div>
			</div>
		</div>
		
		
		<div id="relationInfo" class="editPanel" style="float:left; margin-left:5px;height:320px; width:34%;">
			<span class="title">押金管理</span><span style="float:right;margin-right:25px;">合计:<span id="sum"></span>元</span>
			<div style="clear:both;"></div>
			<div style="float:left; width:94%;margin-left:10px;height:92%;overflow-y:scroll;overflow-x:hidden;border:1px solid white;">
				<table id="depositTable" class="relationTable">
					<tr>
						<th style="width:34%; ">
							<div class="buttons" style="float:left; margin-left:5px;">
								<a id="addDepositBtn" href="#">
									添加
								</a>
							</div>
						</th>
						<th style="width:25%;">
							日期
						</th>
						<th style="width:14%;">
							押金
						</th>
						
						<th style="width:27%;">
							备注
						</th>
					</tr>
					<c:forEach var="item" items="${depositList}" varStatus="status">
					<tr sysid='${item.sysId}'>
						<td>
							<div class="buttons" style="float:left; margin-left:5px;">
								<a name="saveDepositBtn" href="#">
									保存
								</a>
								<a name="delDepositBtn" href="#">
									删除
								</a>
							</div>
						</td>
						<td>
							<span name="createTime">${item.showDate}</span>
							<input type="hidden" name="mbSysId" value="${member.sysId}"/>
						</td>
						<td>
							<input type="text" name="deposit" style="width:30px;" maxlength="8" value="${item.deposit}"/>
						</td>
						<td style="text-align:left;">
							<input type="text" name="log" style="width:70px;" maxlength="12" value="${item.log}"/>
						</td>
					</tr>
					</c:forEach>
				</table>
				<div style="height:1px;clear:both;"></div>
			</div>
		</div>
		
	</div>
</div>--%>